<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格分支</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="apt">
        <!-- 按钮 -->
        <el-button type="primary" size="default" @click="add()">新建一个按钮</el-button>

        <!-- 对话框 -->
        <el-dialog title="录入新的自由行项目" :visible.sync="open" width="40%" @close="">

            <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="编号">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="编码">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="景点名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="景点描述">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="open = false">取消</el-button>
                <el-button type="primary" @click="yess()">确认</el-button>
            </span>
        </el-dialog>

        <!-- 表格 -->
        <el-table :data="tbData" border stripe>
            <el-table-column v-for="col in tbCols" :prop="col.id" :key="col.id" :label="col.label">
            </el-table-column>

            <el-table-column label="操作">

                <!-- scope 范围--》 作用域 -->
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="primary" size="small">更新</el-button>
                    <el-button @click="del(scope.row.id)" type="danger" size="small">移除</el-button>
                </template>

            </el-table-column>

        </el-table>

        <!-- 分页 elp -->
        <el-pagination @current-change="currentChange" @prev-click="prev()" @next-click="next()"
            :current-page.sync="current" layout="total, prev, pager, next, jumper" :total="total"
            :page-size.sync="pageSize" background>
        </el-pagination>


    </div>
</body>

<script>
    new Vue({
        el: '#apt',
        data() {
            return {
                editrow: 0,
                modeType: 0,
                pageSize: 5,
                current: 1,
                total: 0,
                form: {
                    age: '',
                    id: '',
                    code: '',
                    name: '',
                    price: '',
                    remark: ''
                },
                open: false,
                tbData: [],
                tbCols: [
                    { id: 'age', label: '年龄' },
                    { id: 'id', label: '编号' },
                    { id: 'code', label: '编码' },
                    { id: 'name', label: '景点名' },
                    { id: 'price', label: '价格' },
                    { id: 'remark', label: '景点描述' },
                    //   {id:'sex',label:'性别'},
                    // {id:'type',label:'类型'},

                ],
            }
        },
        methods: {
            currentChange: function () {
                console.log(`当前 ${this.current}`);

                // GET /api/item?p=1&s=20
                // s = pageSize 页面的大小，一页多少条数据
                // p = current 当前位置，1，2，3，4
                let url = 'http://101.200.61.92:9000/api/item';
                axios.get(url, {
                    params: {
                        p: this.current,
                        s: this.pageSize
                    }
                })
                    .then(res => {
                        // console.log(res);
                        this.tbData = res.data.page;
                        this.total = res.data.total;
                    })
            },
            next: function () {
                this.current++;
            },
            prev: function () {
                this.current--;
            },
            load: function () {
                let url = 'http://101.200.61.92:9000/api/item';
                axios.get(url, {
                    params: {
                        p: this.current,
                        s: this.pageSize
                    }
                })
                    .then(res => {
                        console.log(res);
                        this.tbData = res.data.page;
                        this.total = res.data.total;
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            yess: function () {
                this.open = false;

                if (this.modeType == 0) {
                    let url = 'http://101.200.61.92:9000/api/item';
                    axios.post(url, this.form)
                        .then(res => {
                            // console.log(res);
                            this.load();
                        })
                        .catch(err => {
                            console.error(err);
                        })
                } else {
                    var id = this.editrow.id;
                    console.log("id为：" + id);
                    let url = `http://101.200.61.92:9000/api/item/${id}`;
                    axios.put(url, this.form)
                        .then(res => {
                            // console.log(res.data.page);
                            this.load();
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }

            },
            add: function () {
                this.modeType = 0;
                this.open = true;
                console.log("form:" + this.form);
                this.form.age = '';
                this.form.id = '';
                this.form.code = '';
                this.form.name = '';
                this.form.price = '';
                this.form.remark = '';
            },

            edit: function (id) {
                this.modeType = 1;
                this.open = true;
                this.editrow = id;
                console.log(this.editrow);
                //直接传过来不行，因为我们没有在data定义，所以进行深拷贝
                this.form = JSON.parse(JSON.stringify(id))

            },
            del: function (id) {
                // console.log("del" + id);
                let url = `http://101.200.61.92:9000/api/item/${id}`;

                axios.delete(url)
                    .then(res => {
                        // console.log(res);
                        this.load();
                    })
                    .catch(err => {
                        console.error(err);
                    })
            }
        },
        created() {  // 
            this.load();
        },
    })
</script>

</html>